<template>
    <div class="head-detail" style="margin-bottom: 20px;">
        <el-avatar>{{ author.username }}</el-avatar>
        <div >
            <p>标题：{{ article.title }}</p>
            <p v-if="tags.length != 0">标签:
                <el-tag v-for="tag in tags" :key="tag.description" type="primary" effect="plain">
                    <el-link type="primary">{{ tag.description }}</el-link>
                </el-tag>
            </p>
            <p>创建时间:{{ article.createTime }}</p>
        </div>
    </div>
    <div>
        <el-scrollbar max-height="80vh" @end-reached="handlerEnd()">
            <h2 style="text-align: center;margin: 10px;color: antiquewhite;"><<{{ article.title }}>></h2>
            <p style="text-align: right;margin: 10px; color: aquamarine;">--作者:{{ author.username }}</p>
            <p v-for="line in message" :key="line" style="color:aqua;">
                {{ line }}
            </p>
        </el-scrollbar>
    </div>
    <div>
        <h2>你认为这篇文章怎么样?</h2>
         
    </div>
    <div>
        
        <el-scrollbar max-height="600px" @end-reached="handlerEnd()">
            <div v-if="comments.length > 0" v-for="comment in comments"  class="comment">
                <div class="avarat">
                    <el-avatar>{{ comment.username }}</el-avatar>
                </div>
                <div class="comment-detail" style="color: aliceblue;">
                    <p>创建时间：{{ comment.createTime }}</p>
                    <p>{{ comment.message }}</p>
                </div>
            </div>
        </el-scrollbar>
    </div>
    <p style="text-align: right;">
        <el-button type="primary" size="default" :icon="CirclePlusFilled" @click="showDialog()">
            评论
        </el-button>
    </p>

    <el-dialog  :close-on-click-modal="false" :draggable="true"
    :width="700"
    :before-close="handlerClose"
    v-model="dialogVisible" align-center>
    <template #header>
        说点什么？🤣
    </template>
        <el-from>
            <el-form-item>
                <el-input type="textarea" placeholder="恶言伤人心……" 
                v-model="comment.message">
                </el-input>
            </el-form-item>
        </el-from>
        <template #footer>
            <el-button type="info" @click="handlerClose()">取消</el-button>
            <el-button type="success" @click="submit()">提交</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import {CirclePlusFilled} from '@element-plus/icons-vue';
import qs from 'qs';

//一旦完成dom节点的加载就调用此程序
onMounted(()=>{
    showArticle();
});

//定义变量存放文章
const article = ref({});

//定义变量存放文章
const message = ref([]);

//定义变量存放当前文章的作者
const author = ref({});

//定义变量存放标签
const tags = ref([]);

//定义变量存放评论列表
const comments = ref([]);

//定义变量让弹窗出现
const dialogVisible = ref(false);

//保存评论内容
const comment = ref({
    message:''
});

//向后端发送请求
function showArticle() {
    axios.get(BASE_URL+'/v1/article/query?id='+id)
    .then((response)=>{
        if (response.data.code == 0) {
            article.value = response.data.data.data[0];
            message.value = article.value.message.split('\n');
            author.value = article.value.userVo;
            tags.value = article.value.tags;
            comments.value = article.value.comments;
            console.log(article.value);
        }
        else {
            ElMessage.error('暂未找到该文章！');
        }
    });
}

//获取当前文章的id
const id = new URLSearchParams(window.location.search).get('id');

//获取当前用户
const currentUser = JSON.parse(localStorage.getItem('user'));

function handlerEnd(direction) {
    console.log('当前方向是:',direction);
    ElMessage.info('到底了，笨蛋');
}


function showDialog() {
    dialogVisible.value = true;
}

function handlerClose() {
    if (window.confirm('你确定要关闭吗')) {
        comment.value.message = '';
        dialogVisible.value = false;
    }
}

function submit() {
    comment.value.userId = currentUser.id;
    comment.value.articleId = id;
    console.log(comment.value);
    let data = qs.stringify(comment.value);
    axios.post(BASE_URL+'/v1/comment/save',data)
    .then((response)=>{
        if (response.data.code == 0) {
            ElMessage.success('评论成功！感谢您做的贡献');
            comment.value.message = '';
            dialogVisible.value = false;
            showArticle();
        }
        else {
            ElMessage.error('你妈的，评论出错了，重新试一下，你妈的！');
        }
    });
};


</script>

<style>
.head-detail {
    display: flex;
    padding: 20px;
    border-bottom: 1px solid #fff;
    justify-content:center;
    gap: 25%;
}

.el-tag {
    background-color: rgba(0, 0, 0, 0);
}

.comment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px;

}

.avarat {
    width: 30%;
    text-align: center;
}

.comment-detail {
    width: 70%;
}

</style>